<script setup>


import {defineAsyncComponent, onMounted, reactive, ref, watch} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import {CircleClose, CirclePlus, Download, Open, RefreshRight, Search, Unlock} from "@element-plus/icons-vue";





// ===================================分页显示=========================================================


const pageNum = ref(1);
const pageSize = ref(10);
const log4Query = reactive({
  account: '',
  pageNum,
  pageSize
})
const logInfos = ref([])
const query = () => {
  axios.post('/userActionLog/page', log4Query)
      .then(resp => {
        logInfos.value = resp.data.records;
        total.value = resp.data.total;
        pageNum.value = resp.data.current;
      })
      .catch(errorMsg => {
        ElMessage.error(errorMsg);
      })
}


const total = ref(0)
const handleSizeChange = val => {
  pageSize.value = val;
  query();
}
const handleCurrentChange = val => {
  pageNum.value = val;
  query();

};
// ====================================================================================================================

onMounted(() => {
  query();
})
</script>


<template>
  <el-row>
    <el-col :span="2">
      <div>
        <hr/>
      </div>
    </el-col>
    <el-col :span="2" style="text-align: center; color: #909399">
      <div>查询条件</div>
    </el-col>
    <el-col :span="20">
      <div>
        <hr/>
      </div>
    </el-col>
  </el-row>


  <el-form :model="log4Query">
    <el-row>
      <el-col :span="6">
        <el-form-item label="账号" label-width="100">
          <el-input v-model="log4Query.account" size="small" autocomplete="off"/>
        </el-form-item>
      </el-col>

      <el-col :span="2" class="center-content" :offset="1">
        <el-button type="primary" size="small" :icon="Search" round
                   @click="query()">查询
        </el-button>
      </el-col>


    </el-row>
  </el-form>



  <el-row>
    <el-col :span="24">
      <div>
        <hr style="border-color: #7a73f5;"/>
      </div>
    </el-col>
  </el-row>

  <!-- ========================================分页查询====================================================================== -->
  <el-row>


    <el-table :data="logInfos" border fit style="width: 100%" >
      <el-table-column prop="account" label="操作用户"></el-table-column>
      <el-table-column prop="actionContent" label="操作内容"></el-table-column>
      <el-table-column prop="ipAddress" label="ip"></el-table-column>
      <el-table-column prop="ipMap" label="地址"></el-table-column>
      <el-table-column prop="createdAt" label="操作时间"></el-table-column>
    </el-table>

    <el-pagination
        style="margin-top: 20px"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        prev-text="上一页"
        next-text="下一页"

    />


  </el-row>



</template>



<style scoped>


/* 使用 :deep() 穿透样式作用域 */
:deep(.el-table thead th) {
  background-color: #f5f7fa !important;
}


.el-row {
  margin-bottom: 20px;
}

.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 3px;
}

.move-up {
  margin-top: -60px; /* 向上移动20像素 */
}

</style>